var myChart1 = echarts.init(document.getElementById('echart1'));
var myChart2 = echarts.init(document.getElementById('echart2'));
var myChart3 = echarts.init(document.getElementById('echart3'));
var myChart4 = echarts.init(document.getElementById('echart4'));
        // 指定图表的配置项和数据
        var option = {
        	    tooltip: {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b}: {c} ({d}%)"
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        x: 'left',
        	        data:['身份证OCR识别','驾驶证扣分','图像识别服务','短信验证','银行卡识别']
        	    },
        	    series: [
        	        {
        	            name:'访问来源',
        	            type:'pie',
        	            radius: ['50%', '70%'],
        	            avoidLabelOverlap: false,
        	            label: {
        	                normal: {
        	                    show: false,
        	                    position: 'center'
        	                },
        	                emphasis: {
        	                    show: true,
        	                    textStyle: {
        	                        fontSize: '30',
        	                        fontWeight: 'bold'
        	                    }
        	                }
        	            },
        	            labelLine: {
        	                normal: {
        	                    show: false
        	                }
        	            },
        	            data:[
        	                {value:335, name:'身份证OCR识别'},
        	                {value:310, name:'驾驶证扣分'},
        	                {value:234, name:'图像识别服务'},
        	                {value:135, name:'短信验证'},
        	                {value:1548, name:'银行卡识别'}
        	            ]
        	        }
        	    ]
        	};
        
       var option1 = {
        	    color: ['#3398DB'],
        	    tooltip : {
        	        trigger: 'axis',
        	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        	        }
        	    },
        	    grid: {
        	        left: '3%',
        	        right: '4%',
        	        bottom: '3%',
        	        containLabel: true
        	    },
        	    xAxis : [
        	        {
        	            type : 'category',
        	            data : ['身份证OCR识别', '驾驶证扣分', '图像识别服务', '短信验证', '银行卡识别'],
        	            axisTick: {
        	                alignWithLabel: true
        	            }
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'直接访问',
        	            type:'bar',
        	            barWidth: '60%',
        	            data:[10, 52, 200, 334, 390, 330, 220]
        	        }
        	    ]
        	};
       
       var option2 = {
       	    color: ['#C23531'],
       	    tooltip : {
       	        trigger: 'axis',
       	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
       	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
       	        }
       	    },
       	    grid: {
       	        left: '3%',
       	        right: '4%',
       	        bottom: '3%',
       	        containLabel: true
       	    },
       	    xAxis : [
       	        {
       	            type : 'category',
       	            data : ['身份证OCR识别', '驾驶证扣分', '图像识别服务', '短信验证', '银行卡识别'],
       	            axisTick: {
       	                alignWithLabel: true
       	            }
       	        }
       	    ],
       	    yAxis : [
       	        {
       	            type : 'value'
       	        }
       	    ],
       	    series : [
       	        {
       	            name:'直接访问',
       	            type:'bar',
       	            barWidth: '60%',
       	            data:[10, 52, 200, 334, 390, 330, 220]
       	        }
       	    ]
       	};
       
       
       var colors = ['#5793f3', '#d14a61', '#675bba'];


       var option3 = {
           color: colors,

           tooltip: {
               trigger: 'none',
               axisPointer: {
                   type: 'cross'
               }
           },
           legend: {
               data:['成功次数', '失败次数','总次数']
           },
           grid: {
               top: 70,
               bottom: 50
           },
           xAxis: [
               {
                   type: 'category',
                   axisTick: {
                       alignWithLabel: true
                   },
                   axisLine: {
                       onZero: false,
                       lineStyle: {
                           color: colors[1]
                       }
                   },
                   axisPointer: {
                       label: {
                           formatter: function (params) {
                               return '成功次数  ' + params.value
                                   + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                           }
                       }
                   },
                   data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
               },
               {
                   type: 'category',
                   axisTick: {
                       alignWithLabel: true
                   },
                   axisLine: {
                       onZero: false,
                       lineStyle: {
                           color: colors[0]
                       }
                   },
                   axisPointer: {
                       label: {
                           formatter: function (params) {
                               return '失败次数' + params.value
                                   + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                           }
                       }
                   },
                   data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
               }
           ],
           yAxis: [
               {
                   type: 'value'
               }
           ],
           series: [
               {
                   name:'成功次数',
                   type:'line',
                   xAxisIndex: 1,
                   smooth: true,
                   data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
               },
               {
                   name:'失败次数',
                   type:'line',
                   smooth: true,
                   data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
               },
               {
                   name:'总次数',
                   type:'line',
                   smooth: true,
                   data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
               }
           ]
       };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option);
        myChart2.setOption(option1);
        myChart3.setOption(option2);
        myChart4.setOption(option3);